<template>
  <div>
    <el-row>
      <el-col :span="4">
        <div class="title">
          <el-avatar
            src="http://localhost:3000/upload/aniya.jpg"
            :size="60"
          ></el-avatar>
        </div>
      </el-col>
      <el-col :span="10">
        <ul>
          <b>
            <li><router-link to="./">回到首页</router-link></li>
            <li><router-link to="./message">留言</router-link></li>
            <li><router-link to="/about">联系我们</router-link></li>
          </b>
        </ul>
      </el-col>
      <el-col :span="4">
        <div class="load">
          <el-button type="primary" size="middle" @click="handleLogin"
            >登录</el-button
          >
        </div>
      </el-col>
    </el-row>
    <div class="EchartPractice">
      <div id="main"></div>
      <div id="main2"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      type: [],
      number: [],
      data: [],
    }
  },
  watch: {
    type: function () {
      this.drawChartCircle(this.data)
      this.drawChart(this.number, this.type)
    },
    data: function (newval, oldval) {
      this.drawChartCircle(newval)
    },
  },
  created() {
    this.$api.getTypeArticleNumber().then((res) => {
      const { result } = res.data
      result.forEach((item) => {
        this.number.push(item.total)
        this.type.push(item.type)
      })
    })
    this.$api.getClickTypeArticleNumber().then((res) => {
      const { result } = res.data
      // console.log(result)
      this.data = result
    })
  },
  mounted() {
    // this.drawChartCircle()
    // this.drawChart()
  },
  methods: {
    handleLogin() {
      window.location.href = 'http://localhost:8080/login'
    },
    drawChart(number, type) {
      let myEchart = this.$echarts.init(document.getElementById('main'))
      let option = {
        title: [
          {
            text: '各分类文章数目图',
          },
        ],
        polar: {
          radius: [30, '80%'],
        },
        angleAxis: {
          // max: ,
          startAngle: 75,
        },
        radiusAxis: {
          type: 'category',
          data: type,
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: number,
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}',
          },
        },
      }
      myEchart.setOption(option)
    },
    drawChartCircle(data) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main2'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '各分类点击量表',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // console.log(cate)
      // console.log(option.series[0].data)
    },
    // get请求 获取文章分类数据
  },
}
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
body {
  background-image: url('../assets/images/aniya3.jpg');
}
.el-container {
  min-width: 900px;
}

li {
  float: left;
  list-style: none;
  padding: 20px;
  line-height: 60px;
  font-size: 24px;
  font-family: KaiTi;
}
.look {
  text-align: center;
}
.firstpage {
  text-align: center;
}
.title,
.search,
.load {
  line-height: 80px;
  margin: 5px 40px;
}
.load {
  width: 100px;
  margin: 20px;
  line-height: 50px;
}
.el-col {
  display: flex;
  justify-content: center;
}
.title {
  margin-top: 20px;
}
.el-button {
  width: 70px;
  height: 40px;
}
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

.EchartPractice {
  display: flex;
}
#main {
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 100px;
  background-color: rgba(250, 250, 250, 0.3);
}
#main2 {
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 100px;
  background-color: rgba(250, 250, 250, 0.3);
}
</style>
